<template>
  <div>
    <DialogStyle>
      <el-dialog
        title="新增区域"
        :visible="dialogVisible"
        width="750px"
        :close-on-click-modal="false"
        @close="dialogClose"
        @open="openFn"
      >
        <!-- 表单内容 -->
        <el-form ref="deptRef" :rules="deptRules" :model="formData" label-width="150px" style="padding-left:100px">
          <el-form-item label="设备编号：">
            {{ '系统自动生成' }}
          </el-form-item>
          <el-form-item prop="vmType" label="选择型号：">
            <el-select v-model="formData.vmType" style="width:400px">
              <el-option
                v-for="item in vmTypeListInfo"
                :key="item.typeId"
                :label="item.name"
                :value="item.typeId"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="nodeId" label="选择点位：">
            <el-select v-model="formData.nodeId" style="width:400px">
              <el-option
                v-for="item in nodeSearchList"
                :key="item.id"
                :label="item.addr"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <!-- 底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button style="margin-right:50px" @click="dialogClose">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
      <DialogStyle /></dialogstyle></div>
</template>

<script>
import { vmTypeList, nodeSearch, addVmApit } from '@/api'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      deptRules: {
        vmType: [
          { required: true, message: '请输入', trigger: ['blur'] }
        ],
        nodeId: [
          { required: true, message: '请输入', trigger: ['blur'] }
        ]
      },
      formData: {
        createUserId: 1,
        nodeId: '',
        vmType: ''
      },
      vmTypeListInfo: [],
      nodeSearchList: []
    }
  },
  methods: {
    async openFn() {
      const res = await vmTypeList({ pageIndex: 1,
        pageSize: 100000 })
      this.vmTypeListInfo = res.currentPageRecords
      const res2 = await nodeSearch({
        pageIndex: 1,
        pageSize: 100000
      })
      this.nodeSearchList = res2.currentPageRecords
      setTimeout(() => {
        this.addrstyle(this.nodeSearchList)
      })
    },
    // 关闭弹窗
    dialogClose() {
      this.$emit('closeInsideWord')
      this.$refs.deptRef.resetFields()
    },
    // 新增区域
    async submit() {
      // console.log(this.formData, '878946654')
      this.$refs.deptRef.validate(async valid => {
        if (!valid) return
        try {
          await addVmApit(this.formData)
          this.$message.success('新增成功')
          this.$emit('fetchListFn')
          this.dialogClose()
        } catch (err) {
          this.$message.warning(`新增失败,${err.response.data}`)
        // console.dir(err)
        }
      })
    },
    addrstyle(arr) {
      arr.map(item => {
        item.addr = item.addr.split('-')[3]
      })
    }
  }
}
</script>

<style>
.dialog-footer{
  margin-right: 250px;
}
</style>
